<?php /*a:1:{s:47:"/www/wwwroot/ams/app/admin/view/notice/add.html";i:1588570132;}*/ ?>
<link href="/static/index/moban/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="/static/index/moban/assets/css/now-ui-kit.css?v=1.1.0" rel="stylesheet" />

<body class="index-page sidebar-collapse">

    <div class="container">

        <div class="row" style="margin-top:10px;">
            <!-- 左侧栏 -->
            <div class="col-md-9">
                <!-- 标题 -->
                <div class="input-group has-success">
                    <span class="input-group-addon">
                        标题
                    </span>
                    <input id="title" type="text" class="form-control form-control-success" placeholder="请输入标题">
                </div>

                <div class="row">
                    <!-- 信息来源 -->
                    <div class="col-md-4">
                        <div class="input-group has-success">
                            <span class="input-group-addon">
                                信息来源
                            </span>
                            <input id="information_source" type="text" class="form-control form-control-success"
                                placeholder="请输入信息来源">
                        </div>
                    </div>
                    
                    <!-- 作者 -->
                    <div class="col-md-4">
                        <div class="input-group has-success">
                            <span class="input-group-addon">
                                作者
                            </span>
                            <input id="author" type="text" class="form-control form-control-success"
                                placeholder="请输入作者">
                        </div>
                    </div>

                    <!-- 发布日期 -->
                    <div class="col-md-4">
                        <div class="input-group has-success">
                            <span class="input-group-addon">
                                发布日期
                            </span>
                            <input id="release_date" type="date" class="form-control form-control-success">
                        </div>
                    </div>
                </div>

                <!-- 富文本输入框 -->
                <div id="editor"></div>

                <!-- 上传图片按钮 -->
                <div class="row">
                    <div class="col-md-12">
                        <button class="btn btn-info" onclick="add_images()">上传图片</button>
                        <input type="file" id="add_images" onchange="UploadImg(this)" style="display: none;"
                            accept="image/*" />
                    </div>
                </div>

                <!-- 图片附件 -->
                <div id="display-images" class="row"></div>
            </div>

            <!-- 右侧栏 -->
            <div class="col-md-3">

                <div class="row">
                    <!-- 是否置顶 -->
                    <div class="col-md-12">
                        <div class="checkbox">
                            <input id="is_top" type="checkbox" checked="">
                            <label for="is_top">
                                是否置顶
                            </label>
                        </div>
                    </div>

                    <!-- 是否显示 -->
                    <div class="col-md-12">
                        <div class="checkbox">
                            <input id="display" type="checkbox">
                            <label for="display">
                                是否显示
                            </label>
                        </div>
                    </div>

                    <!-- 保存按钮 -->
                    <div class="col-md-12">
                        <button id="save" class="btn btn-info">新增</button>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <!-- 加载 JS -->
    <script src="/static/admin/lib/jquery/jquery.js"></script>
    <script src="/static/admin/lib/layer/layer.js"></script>
    <script src="/static/admin/lib/wangEditor/wangEditor.min.js"></script>
    <script>

        // 初始化 富文本插件
        var E = window.wangEditor
        var editor = new E('#editor')
        // editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'italic',  // 斜体
            'underline',  // 下划线
            // 'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            // 'list',  // 列表
            // 'justify',  // 对齐方式
            // 'quote',  // 引用
            // 'emoticon',  // 表情
            // 'image',  // 插入图片
            // 'table',  // 表格
            // 'video',  // 插入视频
            // 'code',  // 插入代码
            // 'undo',  // 撤销
            // 'redo'  // 重复
        ]
        editor.create()

        // 图片参数定义
        var fileList = [];
        var image_n = 0;

        // 添加图片
        function add_images() {
            $('#add_images').click();
        }

        // 显示图片到页面,并添加到提交组里面
        function UploadImg(obj) {

            var file = obj.files[0];
            var reader = new FileReader();

            //读取文件过程方法
            reader.onloadstart = function (e) {
                console.log("开始读取....");
            }
            reader.onprogress = function (e) {
                console.log("正在读取中....");
            }
            reader.onabort = function (e) {
                console.log("中断读取....");
            }
            reader.onerror = function (e) {
                console.log("读取异常....");
            }
            reader.onload = function (e) {
                console.log("成功读取....");

                if (!/image/.test(file.type)) {
                    return layer.msg("[ " + file.name + "] 该文件类型不正确，请上传图片类型", { icon: 5, time: 5000 });
                }

                var imgstr = '<img id="image_' + image_n + '" style="width:100%;height:180px; padding:3px;border-radius: 15px;" src="' + e.target.result + '" onclick="del_images(' + image_n + ',this)"/>';
                var oimgbox = document.getElementById("display-images");

                var ndiv = document.createElement("div");
                ndiv.innerHTML = imgstr;
                ndiv.className = "col-md-3";

                oimgbox.appendChild(ndiv);

                fileList.push({'id':image_n,'file':file});
                image_n ++;
            }
            reader.readAsDataURL(file);

        }

        // 保存
        $('#save').on('click', function () {
            // 标题
            var title = $('#title').val().trim();
            // 是否置顶
            var is_top = $('#is_top').prop("checked") ? 1 : 0;
            // 是否置顶
            var display = $('#display').prop("checked") ? 1 : 0;
            // 内容
            var content = editor.txt.html().trim();
            // 作者
            var author = $('#author').val().trim();
            // 信息来源 
            var information_source = $('#information_source').val().trim();
            // 发布日期 
            var release_date = $('#release_date').val().trim();

            // 标题判断
            if (title.length <= 0) {
                return layer.msg("标题不能为空", { icon: 5, time: 900 });
            }
            // 内容判断
            if (content == "<p><br></p>") {
                return layer.msg("内容不能为空", { icon: 5, time: 900 });
            }

            // 提交表单
            var formData = new FormData();
            formData.append('title', title);
            formData.append('content', content);
            formData.append('is_top', is_top);
            formData.append('display', display);
            formData.append('author', author);
            formData.append('information_source', information_source);
            formData.append('release_date', release_date);

            // 上传图片组
            fileList.forEach(function (dict) {
                formData.append('image_files[]', dict['file']);
                console.log(dict)
            });

            $.ajax({
                url: "<?php echo url('Notice/add_notice'); ?>",
                data: formData,
                type: "POST",
                dataType: "JSON",
                cache: false,
                processData: false,
                contentType: false,
                success: function (res) {
                    // 返回结果处理
                    if (res.code == 0) {
                        return layer.msg(res.msg, { icon: 1, time: 900 }, function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭  
                        });
                    } else {
                        return layer.msg(res.msg, { icon: 2, time: 900 });
                    }
                },
                error: function (data) {
                    return layer.msg("服务器异常，请检查", { icon: 2, time: 900 });
                }
            });

        });

        function del_images(id, obj) {  
            layer.confirm('是否确认删除该图片？', {
                btn: ['是', '否'] //按钮
            }, function () {
                // 删除页面
                $('#image_' + id).parent().remove();
                // 删除数组
                var tmp_list = [];
                fileList.forEach(function (dict) {
                    if (dict.id != id)
                        tmp_list.push(dict)
                });
                fileList = tmp_list;
                return layer.msg('删除完成', { icon: 1, time: 900 });
            }, function () { });
        }
    </script>

</body>